<template>
  <div class="timeline-container">
    <a-timeline mode="alternate">
      <a-timeline-item
        v-for="period in periods"
        :key="period.id"
        :color="getTimelineColor(period.sortOrder)"
      >
        <div
          class="timeline-card"
          :style="{ borderLeftColor: getTimelineColor(period.sortOrder) }"
          @click="handlePeriodClick(period)"
        >
          <div
            class="card-badge"
            :style="{ backgroundColor: getTimelineColor(period.sortOrder) }"
          >
            {{ period.sortOrder }}
          </div>
          <h3 :style="{ color: getTimelineColor(period.sortOrder) }">
            {{ period.periodName }}
          </h3>
          <div class="year-range">
            <a-tag :color="getLightColor(period.sortOrder)"
              >{{ period.startYear }} - {{ period.endYear }}</a-tag
            >
          </div>
          <p>{{ period.description }}</p>
          <a-button
            type="link"
            class="detail-btn"
            :style="{ color: getTimelineColor(period.sortOrder) }"
          >
            查看详情 <a-icon type="right" />
          </a-button>
        </div>
      </a-timeline-item>
    </a-timeline>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";
import { listPeriodsUsingGet } from "@/api/clothingHistoryController";
import type API from "@/api";

const router = useRouter();
const periods = ref<API.ClothingHistoryPeriod[]>([]);

// 加载历史时期数据
const loadPeriods = async () => {
  try {
    const res = await listPeriodsUsingGet();
    if (res.data?.code === 0 && res.data.data) {
      periods.value = res.data.data.sort(
        (a, b) => (a.sortOrder || 0) - (b.sortOrder || 0)
      );
    }
  } catch (error) {
    message.error("获取历史时期数据失败");
  }
};

// 获取时间轴颜色
const getTimelineColor = (sortOrder?: number) => {
  const colors = ["#722ed1", "#13c2c2", "#52c41a", "#faad14", "#f5222d"];
  return colors[sortOrder ? sortOrder % colors.length : 0];
};

// 获取浅色调标签颜色
const getLightColor = (sortOrder?: number) => {
  const lightColors = ["purple", "cyan", "green", "orange", "red"];
  return lightColors[sortOrder ? sortOrder % lightColors.length : 0];
};

// 点击时期卡片
const handlePeriodClick = (period: API.ClothingHistoryPeriod) => {
  if (period.id) {
    router.push(`/culture/history/period/${period.id}`);
  }
};

onMounted(() => {
  loadPeriods();
});
</script>

<style scoped>
.timeline-container {
  padding: 40px;
  max-width: 100%;
  margin: 0;
  width: 100%;
  min-height: 100vh;
  background: url("@/assets/background/historybackground.png") no-repeat center
    center;
  background-size: cover;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timeline-container .ant-timeline {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  width: 100%;
}

.timeline-card {
  display: inline-block;
  padding: 20px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s;
  backdrop-filter: blur(3px);
  border-left: 4px solid;
  position: relative;
  min-width: 150px;
  max-width: 300px;
  width: auto;
  transform: scale(0.75);
  transform-origin: center;
  margin: 0 auto;
}

.timeline-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.card-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.timeline-card h3 {
  margin: 0 0 8px;
  font-weight: 600;
  font-size: 18px;
}

.year-range {
  margin-bottom: 12px;
}

.year-range .ant-tag {
  margin-right: 0;
}

.timeline-card p {
  color: #555;
  margin: 0 0 15px;
  line-height: 1.6;
}

.detail-btn {
  padding: 0;
  margin-left: auto;
  display: block;
  font-weight: 500;
}

@media (max-width: 768px) {
  .timeline-card {
    max-width: 67.5%;
  }
}
</style>
